<div class="task-todo-container">
    <input type="text" value="" class="form-control task-todo" placeholder="{{'dashboard.todo.taskTodo' | translate}}" (keyup)="addToDoItem($event)"
        [(ngModel)]="newTodoText" />
    <i (click)="addToDoItem($event)" class="add-item-icon ion-plus-round"></i>
    <div class="box-shadow-border"></div>

    <ul class="todo-list">
        <li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}" (mouseenter)="item.isActive=true"
            (mouseleave)="item.isActive=false">

            <div class="blur-container">
                <div class="blur-box"></div>
            </div>
            <i class="mark" [ngStyle]="{ 'background-color': item.color }"></i>
            <label class="todo-checkbox custom-checkbox custom-input-success">
        <input type="checkbox" [(ngModel)]="item.isChecked">
        <span class="cut-with-dots">{{ item.text }}</span>
      </label>
            <i class="remove-todo ion-ios-close-empty" (click)="item.deleted = true"></i>
        </li>
    </ul>
</div>
